<template>
  <div id="home">
      <div class="bg1">
        <popup v-show="isPopupVisible" @closedl="closePopup" @close2="closePopup2" @dlshuju="getdlform"></popup>
        <popupZc v-show="isPopupVisibleZc" @closeZc="closePopupZc"></popupZc>
        <popupZh v-show="isPopupVisibleZh" @closeZh="closePopupZh"></popupZh>
        <succeed v-show="isPopupVisibleSu" @closeSu="closePopupSu" :msg='msg'></succeed>
        <div class="content">
        <div class="logo">
          <!-- <button @click="showPopupZh">点击按钮</button> -->
          <div class="logo1 div-inline">合众智赢</div>
          <div class="logo2 div-inline">用智慧,&nbsp;赢人生</div>
        </div>
        <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
      <div class="database fleft">足球数据库</div>
      <div class="lists">
        <div :class="xzIndex==index?'listzh':'listxx'" class="fleft" v-for="(item, index) in list8" :key="index">
          <div v-if="index<8" :data-id="item.id" class="jiak" :data-index="index" @click="dianjilist($event)">{{ item.name }}</div>
          <!-- <div v-else>更多联赛</div> -->
        </div>
        <!-- 下拉菜单 -->
          <div class="dropdown fleft">
          <!-- <button class="dropbtn listxx">更多赛事</button> -->
          <div class="dropbtn listxx">更多赛事</div>
          <div class="dropdown-content">
            <a href="javascript:;" :data-id="item.id" :data-index="index+8" @click="dianjilist($event)" v-for="(item, index) in listqt" :key="index">{{ item.name }}</a>
          </div>
        </div>
      </div>
    </div>
    <!-- <router-view/> -->
    <div class="abdomen">
      <div class="left fleft">
        <div class="bordert bgcw">
          <div class="ml10">
            <div style="height:10px"></div>
            <span class="bigfont">会员中心</span>
            <!-- <div class="ptb" v-for="(item, index) in viplist" :key="index"><span class="iconfont" v-html="item.img"></span><span class="ml10">{{ item.name }}</span></div> -->
            <div class="ptb">
              <span class="iconfont">&#xe779;</span>
              <span class="ml10 colorleftlist">账号</span>
              <span v-if="isShow" class="dlzc">
                <button type="button" class="dly butt pointer" @click="showPopup">登录</button>
                <button class="zc butt pointer" @click="showPopupZc">注册</button>

                </span>
                <span v-if="!isShow" class="zhanghao">{{ dlxinxi.zhanghao }}</span>
                </div>
            <div class="ptb">
              <span class="iconfont">&#xe751;</span>
              <span class="ml10 colorleftlist">余额</span>
              <span v-if="!isShow" class="zhanghao">￥{{ dlxinxi.yue }}</span>
              </div>
            <div class="ptb">
              <span class="iconfont">&#xe7ce;</span>
              <span class="ml10 colorleftlist pointer"><router-link class="rlink colorleftlist" to="/yongjin">佣金</router-link></span>
              <span class="yongjin">
                <span v-if="!isShow" style="color:#2B7ECC;">￥{{ dlxinxi.yongjin }}<button class="butt txbut"><router-link class="rlink" to="/withdrawDeposit">提现</router-link></button></span>
              </span>
              </div>
            <div class="ptb"><span class="iconfont">&#xe74d;</span><span class="ml10"><router-link class="rlink colorleftlist" to="/history">订阅历史</router-link></span></div>
            <div class="ptb"><span class="iconfont">&#xe6ef;</span><span class="ml10"><router-link class="rlink colorleftlist" to="/invite">我的邀请</router-link></span></div>
            <div class="ptb"><span class="iconfont">&#xe762;</span><span class="ml10"><router-link class="rlink colorleftlist" to="/spread">我要推广</router-link></span></div>
            <div class="ptb"><span class="iconfont">&#xe773;</span><span class="ml10"><router-link class="rlink colorleftlist" to="/modification">修改密码</router-link></span></div>
            <div class="ptb"><span class="iconfont">&#xe768;</span><span class="ml10 colorleftlist"><a class="rlink colorleftlist" href="javascript:;" @click="tuichu">退出登录</a></span></div>
            <div style="height:10px"></div>
          </div>
        </div>
        <div class="bordert mtop bgcw">
          <div class="ml10">
            <div style="height:10px"></div>
            <span class="bigfont">充值渠道</span>
            <!-- <div class="ptb"><img class="icon" src="../assets/img/wx1.png" alt=""><span class="ml10" @click="wxcz">微信充值</span></div> -->
            <div class="ptb">
              <img class="icon" src="../assets/img/wx1.png" alt="">
              <span class="ml10">
                <router-link class="ax colorcz" to="/wxrecharge">微信充值</router-link>
              </span>
              </div>
            <div class="ptb"><img class="icon" src="../assets/img/zfb1.png" alt=""><span class="ml10"><router-link class="ax colorcz" to="/zfbrecharge">支付宝充值</router-link></span></div>
            <div style="height:10px"></div>
          </div>
        </div>
        <div class="before bordert mtop bgcw">
          <div class="ml10">
            <div style="height:10px"></div>
            <span class="bigfont">往期命中</span>
            <div class="vs ptb" v-for="(item, index) in guess1" :key="index"><router-link class="rlink colorb" to="guess">{{ item.zName }} VS {{ item.kName }}&nbsp;{{ item.matchRound }}轮</router-link>
            <!-- <span class="lun">{{ item.lun }}</span> -->
            </div>
            <div style="height:10px"></div>
          </div>
        </div>
      </div>
      <div class="right fleft">

          <!-- 路由占位符 -->
        <router-view></router-view>

      </div>
    </div>
    </div>
    <div style="height:1000px"></div>
  </div>
  <div class="bottom">
    <div class="gg">
    <div class="lfet0 fleft">
      <div>联系我们：{{ lianxi.qq }}（QQ）{{ lianxi.wx }}（微信）</div>
      <div class="bbt">地址：长沙市芙蓉区湖南隆平科技园东湖湖南生机电职院东湖校区培训楼A栋</div>
    </div>
    <div class="right0 fleft">
      <div>备案号：湘ICP备2020020141号 </div>
      <div class="bbt">Copyright©2020合众智赢版权所有</div>
    </div>
    </div>
  </div>
  </div>
</template>

<script>
// import header from './one/one'
import popup from './popup/popupdl'
import popupZc from './popup/popupzc'
import popupZh from './popup/popupzh'
import succeed from './popup/succeed'

export default {
  // name: "home",
  // components:{
  //   'v-header':header     //注册组件
  // },
  name: 'home',
  components: {
    popup,
    popupZc,
    popupZh,
    succeed
  },
  data() {
    return {
      lianxi:'',
      sta1:'1',
      guess1:[],
      isPopupVisible: false,
      isPopupVisibleZc: false,
      isPopupVisibleZh: false,
      isPopupVisibleSu: false,
      title:'111',
      msg:'',
      // parentMsg: '这是往子路由传递的东西',
      isShow:true,
      xzIndex:0,
      csid:"1",
      chushilist:[],
      dlxinxi: {
          zhanghao:'',
          yue:'',
          yongjin:''
      },
      listall:'',
      list8: [],
      listqt: [],
      onelist: [],
    }
  },

  created() {
    // console.log(window.localStorage.getItem(JSON.parse('yonghuxinxi')))
    this.huoqufenlie()
    console.log('home从本地拿用户信息')
     console.log(window.localStorage.getItem('yonghuxinxi'))
     if (window.localStorage.getItem('yonghuxinxi') == null) {
       console.log('请登录')
     }else {
       var xinxi = ''
       xinxi = JSON.parse(window.localStorage.getItem('yonghuxinxi'))
       this.dlxinxi.zhanghao = xinxi.loginCode
       this.dlxinxi.yue = xinxi.accountMoney
       this.dlxinxi.yongjin = xinxi.integral
       this.isShow = false
     }
     this.getData()
     this.lianxifangshi()
   
  },
  mounted() {
    this.wangqiminz1()
    this.lianxifangshi()
    // console.log(this.$route.query.sutankuang)
    // if(this.$route.query.sutankuang == true) {
    //     this.showPopupSu()
    // }

  },
  watch: {
    "$route": "getData"
  },
  methods: {
    getData() {
      console.log(this.$route.query.sutankuang)
      console.log(this.$route.query.msg)
    if(this.$route.query.sutankuang == true) {
        this.msg = this.$route.query.msg
        console.log(this.msg)
        this.showPopupSu()
    }
    if(this.$route.query.xianshi !== undefined){
      this.isShow = JSON.parse(this.$route.query.xianshi)
    }
    },
    async wangqiminz1() {
          var sst = new FormData()
          sst.set('state',this.sta1)
          const { data: res } = await this.$http.post('app/zqMatchAnalysis/list',sst)
        console.log(res)
        if (res.code !== 0) return console.log('获取往期命中失败')
        console.log('获取往期命中成功')
        for(var i=0; i<res.data.length; i++) {
          if(res.data[i].state == 1) {
            console.log(res.data[i])
            this.guess1.push(res.data[i])
          }
        }
        console.log('54654654654674646888888888')
        console.log(this.guess1)
      },
    push() {
      localStorage.onelist=JSON.stringify(this.onelist);
      var listone;
      listone = JSON.stringify(this.onelist);
      console.log('这是push')
      console.log(listone)
      this.$router.push({
        name:'one',
        query: {
          flid:Math.random()||listone
        }
      })
      console.log(222)
    },
    jiequlist() {
      this.push()
      var listsa = this.listall
      if (listsa.length<=8) {
        this.list8 = listsa
      } else {
        this.list8 = listsa.slice(0,8)
        this.listqt = listsa.slice(8)
      }
      console.log(this.list8)
    },
    dianjilist(event){
      var target = event.target || window.event.srcElement,
       //获取对应元素的id值
      id = target.getAttribute('data-id');
      this.xzIndex = target.getAttribute('data-index');
      this.csid = id
      for(var i=0; i<this.listall.length; i++) {
        if(id==this.listall[i].id) {
          this.onelist = this.listall[i]
        }
      }
      console.log(this.onelist)
      console.log(111)
      this.push()
    },

    async huoqufenlie() {
        const { data: res } = await this.$http.post('app/matchLeague/list')
        if (res.code !== 0) return console.log('获取赛事分类失败')
        console.log('获取赛事分类成功')
        this.listall = res.data
        console.log(this.listall)
        this.onelist = res.data[0]
        this.jiequlist()
    },

    // 登录弹框
    showPopup(){
      this.isPopupVisible = true
    },
    closePopup(){
      this.isPopupVisible = false
    },
    closePopup2(data){
      this.isPopupVisible = false
      this.isPopupVisibleZh = data
      console.log(this.isPopupVisibleZh)
    },

    // 注册弹框
    showPopupZc(){
      this.isPopupVisibleZc = true
    },
    closePopupZc(){
      this.isPopupVisibleZc = false
      console.log(this.isPopupVisibleZc)
    },
    
    // 成功弹框
    showPopupSu(){
      this.isPopupVisibleSu = true
      this.closePopupSu2()
    },
    closePopupSu(){
      this.isPopupVisibleSu = false
      console.log(this.isPopupVisibleZc)
    },
    closePopupSu2(){
      var that = this
      setTimeout(function(){
        that.isPopupVisibleSu = false
      },1500);
      console.log(this.isPopupVisibleZc)
    },

    // 找回密码弹框
    showPopupZh(){
      this.isPopupVisibleZh = true
    },
    closePopupZh(){
      this.isPopupVisibleZh = false
    },
    getdlform(data) {
      console.log(data)
      this.dlxinxi.zhanghao = data.loginCode
      this.dlxinxi.yue = data.accountMoney
      this.dlxinxi.yongjin = data.integral
      this.isShow = false
      this.closePopup()
    },
    tuichu() {
      window.localStorage.clear()
      this.isShow = true
      this.msg='退出成功'
      this.showPopupSu()
    },
    async lianxifangshi() {
      const { data: res } = await this.$http.post('app/user/lianxi')
        if (res.code !== 0) return console.log('获取联系方式失败')
        console.log('获取联系方式成功')
        this.lianxi = res.data
        window.localStorage.setItem('lianxi', JSON.stringify(this.lianxi));
        console.log(res)
    }
  }
}
</script>

<style lang="less">
@import "../assets/css/font.css";
@import "../assets/css/index.css";
*{
			padding: 0;
			margin: 0;
    }
a{color:#287DCB;}
// a:link{color:#000000}
// a:hover{color:#eeeeee}
// a:visited {
//   color: red;
// }

.bg1 {
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/bbg66.png);
  background-size: 100% 100%;
  background-repeat:no-repeat;
  overflow: auto;
  .content {
    width: 95%;
    margin: 0 auto 100px;
    .logo {
    position: relative;
    margin-left: 50px;
    margin-top: 10px;
    .logo1 {
      width: 50px;
      height: 50px;
      color: #DBAF20;
      padding-bottom: 4px;
      text-align:center;
      font-size: 20px;
      background-color:#0D0A38;
    }
    .logo2 {
      position: absolute;
      top: 0;
      color: #FFDB7E;
      font-size: 40px;
      margin-left: 10px;
    }
  }
  }
}

.div-inline{ display:inline-block} 

#nav {
  margin-top: 20px;
  text-align: center;
  width: 1154.59px;
  height: 50px;
  background:rgba(0,0,0,0.1);
}

.database {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 50px;
  padding-right: 20px;
  font-size: 20px;
  color: #FFFFFE;
}
.mbot {
  margin-bottom: 10px;
}
.mtop {
  margin-top: 8px;
}


.listxx {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 2px;
  color: #FFFFFE;
}
.listzh {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 2px;
  color: #FFFFFE;
  font-weight: bold;
  border-bottom: 2px solid #FFFFFF;
}
.listxx:hover {
  cursor: pointer;
  font-weight: bold;
  border-bottom: 2px solid #FFFFFF;
  // background-color: red;
}

.abdomen {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  .connection {
    margin-top: 100px;
  }
}
.ptb {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.zhanghao {
  position: absolute;
  right: 30px;
}
.bgcw {
  background-color: #FFFFFF;
}
.ml10 {
    margin-left: 10px;
}

.fleft {
  float: left;
}
.left {
  width: 20%;
  height: 100%;
}
.right {
  margin-left: 2%;
  width: 78%;
  height: 100%;
}
.icon {
  height: 20px;
  width: 25px;
}
.bigfont {
  font-size: 20px;
  font-weight: 30px;
}
.bordert {
  border-top:5px solid #DB2C54;
}
.vs {
  margin-top: 5px;
  color: #5899DB;
}
.lun {
  margin-left: 10px;
}
.money {
  margin: 15px 0 0 25px;
  height: 100px;
  width: 150px;
  border: 2px solid #FE3A00;
  text-align: center;
  line-height: 100px;
  color:  #FE3A00;
  font-size: 30px;
  font-weight: bold;
}
.mn {
  width: 100%;
  margin-top: 100px;
}

.bottom {
  position: relative;
  bottom: 0;
  color: #FFFFFF;
  height: 100px;
  width: 100%;
  background-color: #191C21;
}
.gg {
  position: absolute;
  margin-left: 25%;
  margin-top: 20px;
}
.right0 {
  margin-left: 70px;
}
.bbt {
  margin-top: 10px;
}
.dly {
  background-color: #fff;
  border: 1px solid #C1C1C1;
}
.zc {
  margin-left: 10px;
  background-color: #FF8B19;
  border: 0;
  color: #fff;
}
.butt {
  width: 50px;
  height: 25px;
}
.txbut {
  margin-left: 20px;
  background-color: #fff;
  color:  #4A94D8;
  border: 1px solid #4A94D8;
}
.rlink {
  text-decoration: none;
}
.yongjin {
  position: absolute;
  right: 30px;
}
.dlzc {
  position: absolute;
  right: 15px;
}
/* 下拉菜单 */
.dropbtn {
    // border: none;
    // margin-top: 3px;
    cursor: pointer;
    font-size: 15px;
    background:rgba(0,0,0,0.0);
  // outline: none;
}

.dropdown {
    position: relative;
    // display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    // background-color: #f9f9f9;
     background:rgba(0,0,0,0.5);
    min-width: 104px;
    z-index: 8888;
    // box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 8888;
}

.dropdown-content a:hover {
  font-weight: bold;
}

.dropdown:hover .dropdown-content {
    display: block;
}

// .dropdown:hover .dropbtn {
//     background-color: #3e8e41;
// }
</style>
